<template>
  <el-dialog
    title="写文章"
    :visible.sync="dialogVisible"
    width="30%"
    :before-close="handleClose"
    fullscreen
  >
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="文章标题" prop="title">
        <el-input v-model="ruleForm.title" placeholder="请输入文章标题"></el-input>
      </el-form-item>
      <el-form-item label="文章类别" prop="cate_id">
        <el-select
          v-model="ruleForm.cate_id"
          placeholder="请选择活动区域"
          style="width: 100%"
        >
          <el-option
            v-for="item in artData"
            :key="item.id"
            :label="item.cate_name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="文章内容" prop="content">
        <!-- 富文本编辑器 -->
        <quill-editor v-model="ruleForm.content" />
      </el-form-item>
      <el-form-item label="文章封面" prop="cover_img">
        <!-- 用来显示封面的图片 -->
        <img
          :src="defaultImg"
          alt=""
          class="cover-img"
          ref="imgRef"
        />
        <br />
        <!-- 文件选择框，默认被隐藏 -->
        <input
          type="file"
          style="display: none"
          accept="image/*"
          ref="iptFile"
          @change="submitImg"
        />
        <!-- 选择封面的按钮 -->
        <el-button type="text" @click="$refs.iptFile.click()">+ 选择封面</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitArtList('已发布')">发布</el-button>
        <el-button type="info" @click="submitArtList('草稿')">存为草稿</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
// 默认图片
import defaultImg from 'assets/images/cover.jpg'

export default {
  name: 'VueEv2Open',
  props: {
    dialogVisible: {
      typeof: Boolean,
      default: false
    },
    artData: {
      typeof: Array,
      required: true
    }
  },

  data () {
    return {
      defaultImg,
      ruleForm: {
        title: '',
        cate_id: '',
        content: '',
        cover_img: '',
        state: ''
      },
      rules: {
        title: [
          { required: true, message: '请输入文章标题', trigger: 'blur' }
        ],
        cate_id: [
          { required: true, message: '请输入文章类别', trigger: 'change' }
        ],
        content: [
          { required: true, message: '请输入文章内容', trigger: 'change' }
        ],
        cover_img: [
          { required: true, message: '请输入文章封面', trigger: 'change' }
        ]
      }
    }
  },

  methods: {
    handleClose () {
      this.$confirm('确认关闭？')
        .then((_) => {
          this.$emit('open', false)
        })
        .catch((_) => {})
    },
    // 图片
    submitImg (e) {
      const file = e.target.files
      if (file.length === 0) {
        this.defaultImg = defaultImg
        return
      }
      this.ruleForm.cover_img = file[0]
      this.defaultImg = URL.createObjectURL(file[0])
    },
    submitArtList (val) {
      this.$refs.ruleForm.validate(valid => {
        if (!valid) return
        this.ruleForm.state = val
        const fs = new FormData()
        for (const key in this.ruleForm) {
          fs.append(key, this.ruleForm[key])
        }
        this.$emit('submitArtList', fs)
        this.defaultImg = defaultImg
        this.$refs.ruleForm.resetFields()
      })
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .ql-container {
  min-height: 300px;
}
</style>
